<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 上部分 -->
      <el-row>
        <div class="el-col el-col-18">
          <!-- 表单 -->
          <el-form label-width="70px" style="font-size: 14px">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model.trim="query.keyword"></el-input>
            </el-form-item>
            <el-form-item class="el-form-item-content" label="状态">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="(item, i) in status" :key="i" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="itembtn">
              <el-button size="mini" @click="removeKeywords()">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getList">搜索</el-button>
            </el-form-item>
          </el-form>
          <!-- /表单 -->
        </div>
        <!-- 新增技巧 -->
        <div class="addbtn">
          <el-button type="success" size="mini" icon="el-icon-edit" @click="adddialogVisible = true">新增技巧</el-button>
        </div>
      </el-row>
      <!-- 消息提示的文案 -->
      <el-alert :title="`共${total}条数据`" type="info" show-icon> </el-alert>
      <!-- 主体区域 -->
      <el-table :data="list" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="文章标题">
          <template slot-scope="scope">
            <span v-if="scope.row.videoURL">{{ scope.row.title }} <i style="color: blue" class="el-icon-film" @click="showVideo(scope.row)"></i></span>
            <span v-else>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"></el-table-column>
        <el-table-column prop="username" label="录入人"></el-table-column>
        <el-table-column prop="createTime" label="录入时间 ">
          <template slot-scope="scope">{{ scope.row.createTime | parseTimeByString }}</template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.state== 0">启用</span>        <span v-else>禁用</span> -->
            <span>{{ scope.row.state === 0 ? '启用' : '禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <div>{{scope.row}}</div> -->
            <el-button type="text" style="color: #409eff" @click="preview(scope.row.id)">预览</el-button>
            <el-button type="text" style="color: #409eff" @click="changeStates(scope.row)">{{ scope.row.state === 1 ? '启用' : '禁用' }}</el-button>
            <el-button type="text" @click="editShow(scope.row)" :disabled="scope.row.state == 1">修改</el-button>
            <el-button type="text" @click="removeArticles(scope.row.id)" :disabled="scope.row.state == 1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /主题区域 -->
      <!-- 分页功能 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 5, 10]"
        :page-size="pagesize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <!-- /分页功能 -->
    </el-card>

    <!-- 修改文章框 -->
    <el-dialog title="修改文章" :visible.sync="editdialogVisible" width="50%" @close="editClosed">
      <!-- 表单主体 -->
      <el-form :model="editForm" ref="editFormRef" label-width="100px">
        <el-form-item label="文章标题" prop="title" placeholder="请输入文章标题">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <!-- 富文本编辑器 -->
          <quill-editor ref="myQuillEditor" v-model="editcontent" :options="editorOption" @change="onEditChange($event)" />
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="editForm.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <!--  表单主体-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFun">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /修改文章框 -->
    <!-- 新增文章框 -->
    <el-dialog title="新增文章" :visible.sync="adddialogVisible" width="50%" center @close="closed">
      <articles-add :addForm="addForm" @post-success="PostSuccess" @closedBTN="closedBtn" />
      <!-- 表单主体 -->
      <!-- <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="文章标题" prop="title"  placeholder="请输入文章标题">
            <el-input v-model="addForm.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody" >

              <quill-editor
                ref="myQuillEditor"
                v-model="content"
                :options="editorOption"
                @change="onEditorChange($event)"
              />
          </el-form-item>
          <el-form-item label="视频地址" prop="videoURL">
            <el-input v-model="addForm.videoURL"></el-input>
          </el-form-item>
        </el-form>

         <span slot="footer" class="dialog-footer">
          <el-button @click="adddialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFun(addForm.title)">确 定</el-button>
        </span> -->
    </el-dialog>
    <!-- /新增文章框 -->

    <!-- 预览文章对话框 -->
    <el-dialog title="预览文章" :visible.sync="previewDialogVisible" width="50%" class="previewBtn">
      <articles-preview :list="list" :id="articleid" />
    </el-dialog>
    <!-- /预览文章对话框 -->

    <!-- 视频弹框 -->
    <el-dialog class="video-preview" :visible.sync="visible" width="50%" center @close="pauseVideo">
    <div>
      <div class="videoBtn" @click="visible = false">X</div>
      <video class="video-box" :src="previewVideoURL" controls autoplay ref="videoRef"></video>
      </div>
    </el-dialog>
    <!-- /视频弹框 -->
  </div>
</template>

<script>
import { list, remove, update, changeState } from '@/api/hmmm/articles'
import { status } from '@/api/hmmm/constants'
import articlesPreview from '@/module-hmmm/components/articles-preview'
import articlesAdd from '@/module-hmmm/components/articles-add'
export default {
  components: {
    articlesPreview,
    articlesAdd
  },
  data () {
    return {
      status,
      value: '',
      id: '',
      list: [],
      page: 1,
      pagesize: 10,
      total: 0,
      query: {
        keyword: '',
        state: ''
      },
      count: 0,
      addForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      content: '',
      editorOption: {
        //
      },
      adddialogVisible: false,
      // 修改文章
      editForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      editdialogVisible: false,
      editcontent: '',
      editObj: {},
      previewDialogVisible: false,
      articleid: '',
      visible: false,
      previewlist: [],
      previewVideoURL: ''
    }
  },
  created () {
    this.getList()
  },
  computed: {},
  methods: {
    pauseVideo () {
      this.$refs.videoRef.pause()
    },
    // 获取数据
    async getList () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.query.keyword
      })
      // console.log(data)
      this.list = data.items
      this.id = data.items.id
      this.total = data.counts
      this.query.state = data.items.state
      this.addForm.title = data.items.title
    },
    // 点击清除按钮，清空关键字输入框
    removeKeywords () {
      this.query.keyword = ''
      this.value = ''
    },
    // 分页功能
    handleSizeChange (size) {
      this.pagesize = size
      this.getList()
    },
    handleCurrentChange (page) {
      this.page = page
      this.getList()
    },
    // 重置表单
    closed () {
      // this.$refs.addFormRef.resetFields()
    },
    // 点击添加
    PostSuccess (data) {
      this.adddialogVisible = false
      this.getList()
    },
    // 点击取消
    closedBtn () {
      this.adddialogVisible = false
    },
    // 删除功能
    async removeArticles (id) {
      console.log(id)
      const confirmResults = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (confirmResults !== 'confirm') {
        return this.$message.info('已经取消了删除')
      }
      this.id = id
      await remove({
        id: this.id
      })
      this.$message.success('删除成功')
      this.getList()
    },
    // 监听编辑窗口的关闭事件
    editClosed () {
      this.$refs.editFormRef.resetFields()
    },
    onEditChange (event) {
      this.editForm.articleBody = event.html
    },
    editShow (row) {
      this.editObj = row
      this.editdialogVisible = true
      this.editForm.title = row.title
      this.editcontent = row.articleBody
      this.editForm.articleBody = this.editcontent
      this.editForm.videoURL = row.videoURL
      // this.id = row.id
      console.log(this.editForm)
    },
    // 修改文章功能
    async editFun () {
      await update({
        id: this.editObj.id,
        title: this.editForm.title,
        articleBody: this.editForm.articleBody,
        videoURL: this.editForm.videoURL
      })
      this.$message.success('修改成功')
      this.getList()
      this.editdialogVisible = false
    },
    preview (id) {
      this.articleid = id
      this.previewDialogVisible = true
    },
    // 控制视频弹框的显示与隐藏
    showVideo (row) {
      this.visible = true
      this.previewVideoURL = row.videoURL
    },
    // 修改状态
    async changeStates (info) {
      const res = await changeState({
        id: info.id,
        state: info.state === 0 ? 1 : 0
      })
      console.log(res)
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  .box-card {
    .el-table__row {
      .gray {
        color: gray;
      }
    }
    // padding: 10px;
    font-size: 14px;
    .el-col {
      display: flex;
      justify-content: space-between;
      .el-form {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .el-button {
          margin-left: 20px;
        }
        .el-form-item {
          font-size: 50px;
        }
        .el-form-item-content {
          vertical-align: center;
        }
        .itembtn {
          margin-left: -50px;
        }
      }
      .el-alert {
        margin: 20px 0;
      }
      .el-table {
        font-size: 14px;
      }
    }
    .ql-container {
      height: 100% !important;
    }
  }
  .video-preview {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 9999;

    // .el-icon-close {
    //   position: absolute;
    //    right: 0;
    //      top: 0;
    //     }
    // .el-dialog__close{
    //     position: absolute;
    //     top: 50%;
    //     right: 50%;
    //     padding: 0;
    //     background: #6b6b6b;
    //     color:white;
    //     border: none;
    //     outline: 0;
    //     cursor: pointer;
    //     font-size: 30px
    // }
    .video-box {
      width: 100%;
      height: 100%;
    }
  }
  .addbtn {
    float: right;
  }
  .el-pagination {
    margin: 15px 0;
  }
  ::v-deep .el-dialog__header {
    // padding: 0;
    position: relative;
    .el-dialog__headerbtn {
      position: absolute;
      top: 15px;
      right: 20px;
      padding: 0;
      background: 0 0;
      border: none;
      outline: 0;
      cursor: pointer;
      font-size: 16px;
      // opacity:0;
      z-index: 999999999;
    }
    // ::v-deep .el-dialog__title {
    //   padding: 20px 0  !important;
    //   opacity:1 !important;
    // }
    .previewBtn {
      padding: 20px 0  !important;
      opacity:1 !important;
    }
  }
     ::v-deep .el-dialog--center .el-dialog__body {
      position: relative;
      padding: 0;
      text-align: initial;
      .videoBtn {
      position: absolute;
      top: -80px;
      left: 440px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0,0,0,.4);
      text-align: center;
      line-height: 40px;
      color: #ffff;
}
    }
}

.el-dialog__body {
  padding: 0;
  z-index: 999;
}
</style>
